<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .font35{
            font-size: 35px;
        }
        .bgblue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind:class用法 -->
        <!-- 1、class对象语法 -->
        <h2 v-bind:class="{ red:isActive, bgnlue:false}">你好么，世界！！</h2>
        <hr>
        <!-- 2、数组语法 -->
        <h2 v-bind:class="[classRed, classBgblue]">你好</h2>
        <hr>
        
        <!-- v-bind:style用法 -->
        <!-- 1、对象语法 -->
        <p v-bind:style = "PClass">hello world</p>
        <!-- 2、数组语法 -->
        <p v-bind:style="[csRed, csBgblue]">hello world</p>
    </div>
</body>
<script src="../lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
    el : '#app',
    data : {
        // v-bind:class 数据绑定
        // 1、class对象语法
        isActive : true,
        isHidden : false,
        // 2、数组语法
        classRed : 'red',
        classBgblue : 'bgblue',

        // v-bind:style 数据绑定
        // 1、对象语法
        PClass : {
            color : 'red',
            font35 : true,
        },
        // 2、数组语法
        csRed: {
            color: 'red',
        },
        csBgblue: {
            bgblue: true,
        },
    },
    methods: {
        
    },
});
</script>
</html>